<template>
<!-- 校园新闻的组件 可以直接使用 -->
	<view>
		<view class="slogan">
			校园新闻
		</view>
		
	    <view class="scroll">
	      <view class="item" v-for="item in news" :style="{backgroundImage: 'url(' + item.backgroundImgSrc + ')'}">

			  <view class="sub">
				  <view class="footer">
					  <view class="title">{{ item.title }}</view>
					   <view class="desc">{{ item.desc }}</view>
					    <view class="date">{{ item.publishDate }}</view>
				  </view>
			  </view>
		  </view>

	    </view>
	</view>
	
</template>

<script>
	export default {
		name:"news-scroll",
		
		data() {
			return {
				news: [{
					title: '新闻标题一',
					desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam',
					publishDate: '2021-9-2',
					backgroundImgSrc: '/static/img5.jpg',
					src: ''
				}, {
					title: '新闻标题二',
					desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam',
					publishDate: '2021-9-2',
					backgroundImgSrc: '/static/img3.jpg',
					src: ''
				}, {
					title: '新闻标题三',
					desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam',
					publishDate: '2021-9-1',
					backgroundImgSrc: '/static/img3.jpg',
					src: ''
				}, {
					title: '新闻标题四',
					desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam',
					publishDate: '2021-8-30',
					backgroundImgSrc: '/static/img4.jpg',
					src: ''
				}, {
					title: '新闻标题五',
					desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam',
					publishDate: '2021-8-29',
					backgroundImgSrc: '/static/img5.jpg',
					src: ''
				}]
			};
		}
	}
</script>

<style scoped>
	.slogan {
		margin: 10rpx 55rpx;
		font-size: 17px;
		font-weight: 500;
		white-space: -0.2em;
	}
	
	.footer {
		color: white;
		height: 100rpx;
		width: inherit;
		
		
		border-radius: 6px;
		padding: 15rpx 10rpx;
		backdrop-filter: blur(10px);
	}
	
	.sub {
		width: 440rpx;
		height: 300rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	
	
	 .item {
		width: 440rpx;
		height: 100%;
		

		/* background-image: url(/static/diego.jpg); */
		/* box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); */
		background-position: center top; 
		background-size: cover;
		margin: 0 20rpx;
		border-radius: 6px;
		
		white-space: nowrap;
		display: inline-block;
		overflow: hidden;
	  }
	

	
	.scroll {
		color: white;
		height: 300rpx;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
		
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin-bottom: 100rpx;
	  }
	
	.title {
		color: white;
		font-family: B612;
		font-style: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: 10px;
		display: flex;
		align-items: center;
		text-align: center;
		letter-spacing: -0.02em;
	}
	
	.desc {
		color: white;
		width: 100%;
		font-family: B612;
		font-style: normal;
		font-weight: normal;
		font-size: 11px;
		word-wrap:break-word;
		/* word-break: break-all; */
		display: block;
	}
	
	.date {
		font-size: 7px;
		text-align: end;
	}

	/*  */
</style>
